function table2(data) {
    $('.table2').html('');
    var trs = '';
    for (var i = 0; i < data.length; i++) {
        trs += "<tr>\n            <td>" + (i + 1) + "</td>\n            <td style=\" text-align: left; \" class=\"justOne\" title=\"" + data[i].PRO_TITLE + "\">" + data[i].PRO_TITLE + "</td>\n            <td class='blTd'><span class='dCount'>" + data[i].count + "</span>[<span class='dCount2'>" + data[i].count2 + "%</span>]</td>\n        </tr>";
    }
    $('.table2').append(trs)
}
//条形图
function chart1(data) {
    // 环形进度条
    $('.ajaxQS').text(data.currentToDoNo);
    $('.ajaxGdc').text(data.currentToDoYes);
    (Number((data.currentToDoNo / data.currentToDo) * 100).toFixed(1) + '%')
    $('#container3 .circleWrap_text').text((Number((data.currentToDoNo / data.currentToDo) * 100).toFixed(1) + '%'))
    $('#container3').circleProgress({
        value: (data.currentToDoNo / data.currentToDo).toFixed(2),
        size: 1000,
        thickness: 110,
        fill: {
            gradient: ["#534cff", "#9c6dc5"]
        },
        startAngle: - Math.PI / 2,
    });
}

function chart2(data) {
    // 环形进度条
    $('.ajaxOnline').text(data.onlineCount);
    $('.ajaxOffline').text(data.offlineCount);
    $('#container4 .circleWrap_text').text((Number((data.onlineCount / data.allCount) * 100).toFixed(1) + '%'))
    $('#container4').circleProgress({
        value: (data.onlineCount / data.allCount).toFixed(1),
        size: 1000,
        fill: {
            gradient: ["#09b87d", "#189dbc"]
        },
        startAngle: - Math.PI / 2,
    });
}

var def = {
    timeInterval: 15000,
    direction: 'vertical',
    controlClass: "JS-swiper",
    tableClass: "table1"
}
var TableList = function (tbox, options) {
    this.tbox = tbox;
    this.options = $.extend({}, def, options);
    this.init();
};
TableList.prototype = {
    init: function () {
        this.data = this.options.data;
        this.tbox.html("");
        this.tbox.append("<table class='table1 no-table-height'><thead><tr> <th class='todayEmployeeAct_th'>序号</th><th>&nbsp;姓名&nbsp;</th><th>&nbsp;&nbsp;&nbsp;待办&nbsp;&nbsp;</th><th>超时</th><th>处理&nbsp;/&nbsp;被退回</th></tr></thead></table>")

        this.tbox.append(this.createSwiper());
        if ($("." + this.options.controlClass).find(".swiper-slide").length <= 1) return;
        var swiper1 = new Swiper("." + this.options.controlClass, {
            direction: this.options.direction,
            autoplay: this.options.timeInterval,
            autoplayDisableOnInteraction: false,
            loop: true
        });
    },
    createSwiper: function () {
        var swiperContainer = $("<div></div>").addClass("swiper-container " + this.options.controlClass);
        var swiperWrapper = "<div class='swiper-wrapper'>";
        swiperWrapper += this.createSliders() + "</div>";
        swiperContainer.append(swiperWrapper);
        this.lastSlide = swiperContainer.find(".swiper-slide:last-child");

        return swiperContainer
    },
    createSliders: function () {
        var tempStart = "<div class='swiper-slide' ><table class='" + this.options.tableClass + "'><tbody>";
        var tempEnd = "</tbody></table></div>";
        var swiperSlides = tempStart;
        if (this.data.length == 0) {
            swiperSlides += "<tr><td colspan='6' class='tdEmptyData'>暂无数据显示</td></tr>"
        }
        for (var i = 0; i < this.data.length; i++) {
            // swiperSlides += this.tableTrs(this.data[i]);
            if (i !== 0 && i % 12 === 0) {
                swiperSlides += tempEnd + tempStart;
            }
            swiperSlides += this.tableTrs(this.data[i], i);
        }
        swiperSlides += tempEnd;
        return swiperSlides;
    },
    tableTrs: function (data, index) {
        var trs = "", scla = (data.statusN == 1 ? "" : data.statusN == 2 ? "w" : "d"),
            lcla = data.levelN == 1 ? "d" : "";
        // trs += "<tr><td>" + data['id'] + "</td><td>" + data['title'] + "</td>" +
        //     "<td>" + data['fenpei'] + "</td><td class='" + lcla + "'>" + data['level'] + "</td>" +
        //     "<td class='" + scla + "'>" + data['status'] + "</td><td class='last-child'>" + data['overTime'] + "</td>" +
        //     "</tr>";
        var dotClass = ''
        if (data.online == 1) {
            dotClass = 'dooot'
        }
        if (data.online == 0) {
            dotClass = 'dooot2'
        }
        trs += "<tr class=\"tr34\"><td class=\"trWitdh1\">" + (index + 1) + "</td><td class=\"trWitdh2\">\n<div class=\"tdWrap\"><span class=\"justOne\">" + data.usrName + "</span><i class=" + dotClass + "></i></div></td><td class=\"trWitdh3\">" + data.ToDoCount + "</td><td class=\"trWitdh4\">" + data.overTimeCount + "</td><td class=\"trWitdh5\">" + data.todayDoneCount + " / " + data.isBackedCount + "</td></tr>"
        return trs;
    }
}




var Clqk = function (cbox, data) {
    this.data = data;
    this.cbox = cbox;
    this.init();
}
Clqk.prototype = {
    init: function (cbox, data) {
        this.create();
    },
    create: function () {
        var item = null,
            account = 0,
            arr = this.arrayClone(this.data),
            max = 0;
        var arr2 = this.data;
        //arr2 = arr2.sort(this.sortFunction);
        // 初始化一个盒子DOM用来添加每一条数据
        var strDomStart = $("<div></div>");
        max = this.getMaxCale(arr, 0);
        max = max * 1;
        if (arr.length == 0) {
            strDomStart.addClass("zEmptyData").text("暂无数据");
        }
        for (var i = 0; i < arr.length; i++) {
            item = this.createItem(arr[i], max);
            // 防止他后边不断地添加
            strDomStart.append(item);
        }
        this.cbox.html(strDomStart);

        var that = this;
        setTimeout(function () {
            that.cbox.find(".zhu-process > .zhu").each(function () {
                var self = $(this);
                if (self.data('width')) {
                    self.css("width", self.data('width'))
                }
            });
        }, 500);

    },
    createItem: function (data, max) {
        var div = $("<div></div>").addClass("zhu-item");
        var divH = $("<div></div>").addClass("zhu-head");
        var divB = $("<div></div>").addClass("zhu-childs");

        divH.append(this.createZhu(data, max));
        div.append(divH);

        if (data.numbers) {
            var child;
            for (var i in data.numbers) {
                child = this.createZhu(data.numbers[i], max);
                divB.append(child);
            }

            this.bindEvent(divH, divB);
        }
        return div.append(divB);
    },
    createZhu: function (data, max) {
        var w1 = Math.floor(data['normalNum'] / max * 1000) / 10;
        var w2 = Math.floor(data['warningNum'] / max * 1000) / 10;
        var w3 = Math.floor(data['timeOutNum'] / max * 1000) / 10;
        w1 = (w1 == 0 ? '0.25' : w1);
        w2 = (w2 == 0 ? '0.25' : w2);
        w3 = (w3 == 0 ? '0.25' : w3);
        var bumen = "",
            lader = "";
        if (data['bumen']) {
            bumen = "<span class='bumen-name'>" + data['name'] + "</span>";
            lader = "负责人:"
        }
        var c = "";
        if (data.numbers && JSON.stringify(data.numbers) != "{}" && !(data.numbers instanceof Array)) {
            c = "cc"
        }

        var html = "<div class='clearfix'>" +
            "<div class='zhu-bumen'>" + bumen + "<span class='lader-name " + c + "'>" + data['name'] + "</span></div>" +
            "<div class='zhu-zhu'><div class='zhu-process'>" +
            "<div class='zhu zhu1' style='width:0%;' data-width='" + w1 + "%'><font>" + data['normalNum'] + "</font></div>" +
            "<div class='zhu zhu2' style='width:0%;' data-width='" + w2 + "%'><font>" + data['warningNum'] + "</font></div>" +
            "<div class='zhu zhu3' style='width:0%;' data-width='" + w3 + "%'><font>" + data['timeOutNum'] + "</font></div></div></div></div>";
        return html;
    },
    bindEvent: function (sEl, cEl) {
        var that = this;
        sEl.on("click", function () {
            sEl.toggleClass("down");
            cEl.stop().slideToggle();
        })
    },
    arrayClone: function (arr) {
        return arr.slice(0, arr.length);
    },
    sortFunction: function (a, b) {
        return b.account - a.account
    },
    getMaxCale: function (arr, max) {
        var n, w, o;
        for (var i = 0; i < arr.length; i++) {
            n = parseInt(arr[i].normalNum);
            w = parseInt(arr[i].warningNum);
            o = parseInt(arr[i].timeOutNum);
            if (n > max) {
                max = n;
            }
            if (w > max) {
                max = w;
            }
            if (o > max) {
                max = o;
            }
        }
        return max;
    }
};



function chart5(data) {

    new Clqk($("#zyp_chart"), data);

}
//10日超时工单数
function chart3(data) {
    // 曲线图
    var chart = null;
    function haha(ohaha) {
        var date = new Date((ohaha))
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
        var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
        return [h, m].join(":")
    }
    $('#container').highcharts({
        chart: {
            type: 'areaspline',
            backgroundColor: 'rgba(0,0,0,0)',
            style: {
                fontFamily: "",
                fontSize: '12px',
                fontWeight: 'bold',
                color: '#535077'
            }
        },
        credits: {
            text: '',
            href: ''
        },
        legend: {
            enabled: false
        },
        title: {
            text: ''
        },
        tooltip: {
            // split: true,
            // shared: true
        },
        xAxis: {
            lineColor: '#272552',
            labels: {

                formatter: function () {
                    var date = new Date((this.value));
                    var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : ("0" + (date.getMonth() + 1));
                    var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
                    return [month, day].join("-");
                },
                style: {
                    color: '#8a9dc8',
                    fontSize: '12px'
                }
            },
            type: 'datetime',
            title: {
                text: null,
                style: {
                    fontWeight: 'normal'
                }
            },

        },
        yAxis: {
            min: 0,
            minRange: 10,
            allowDecimals: false,
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return this.value;
                },
                style: {
                    color: '#8a9dc8',
                    fontSize: '12px'
                }
            },
            gridLineColor: '#403f64'
        },

        plotOptions: {
            series: {
                color: '#c32663',
                lineColor: '#c32663',
                fillColor: {
                    linearGradient: [0, 0, 0, 300],
                    stops: [
                        [0, 'rgba(240,48, 107,0.7)'],
                        [1, 'rgba(0, 0, 0, 0)']
                    ]
                }
            },

            area: {
                fillOpacity: 0.4, // 指定所有面积图的透
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: '数量',
            data: data,
            // data:[
            //     [1530493200000,132],
            //     [1530493440000,123], 
            // ],
            // pointInterval: 60 * 1000 // one day
        }]
    }, function (c) {
        chart = c;
    });
}

//10日处理工单数

function chart4(data,baseData) {
    // return
    var data666 = data.data.date
    var data777 = data.data.in
    var data888 = data.data.out
    var objArrIn = []
    for (var key in data666) {
        for (var j in data777) {
            if (j.indexOf(key) != -1) {
                objArrIn.push([
                    data666[key] * 1000,
                    Number(data777[j])
                ])
            }
        }
    }
    var objArrOut = []
    for (var key in data666) {
        for (var j in data888) {
            if (j.indexOf(key) != -1) {
                objArrOut.push([
                    data666[key] * 1000,
                    Number(data888[j])
                ])
            }
        }
    }
    
    var chartData6 = {
        out: objArrOut,
        in: objArrIn
    }
    var dateIn = chartData6.in.reverse();
    //拼上今日的流出量
    var dateOut = chartData6.out.reverse();
    //兼容历史数据  
    if(dateOut.legnth === 9){
        dateOut.push([new Date().setHours(0, 0, 0, 0),baseData.todayOut]);
    }
    var maxArrTemp = [];
    dateOut.forEach(function(el){
        maxArrTemp.push(el[1]);
    })

    var maxNumIndateOut = Math.max.apply(null,maxArrTemp)+10

    $('#container2').highcharts({
        chart: {
            type: 'areaspline',
            backgroundColor: 'rgba(0,0,0,0)',
            style: {
                fontFamily: "",
                fontSize: '12px',
                fontWeight: 'bold',
                color: '#8a9dc8'
            }
        },
        credits: {
            text: '',
            href: ''
        },
        // 图片x轴的标题
        legend: {
            itemHoverStyle: {
                color: '#fff'
            },
            itemStyle: {
                'color': '#7a91ba'
            },
            // enabled: false
            align: 'right',
            verticalAlign: 'top',
            x: 0,
            y: 0
        },
        title: {
            text: ''
        },
        subtitle: {
            // text: '数据来源: <a href="https://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' 
        },
        tooltip: {
            shared: true,

        },
        xAxis: {
            // startOnTick: true,
            lineColor: '#272552',
            allowDecimals: false,
            labels: {
                formatter: function () {
                    var date = new Date((this.value));
                    var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : ("0" + (date.getMonth() + 1));
                    var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
                    return [month, day].join("-");
                },
                style: {
                    color: '#8a9dc8',
                    fontSize: '12px'
                }
            },
            title: {
                text: null,
                style: {
                    fontWeight: 'normal'
                }
            },
            type: 'datetime'

        },
        legend: {
            enabled: false
        },
        yAxis: {
            min: 0,
            minRange: 1,
            allowDecimals: false,
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return this.value;
                },
                style: {
                    color: '#8a9dc8',
                    fontSize: '12px'
                }
            },
            gridLineColor: '#403f64',
        },
        plotOptions: {
            series: {
                color: '#406edb',
                lineColor: '#406edb',
                fillColor: {
                    linearGradient: [0, 0, 0, 300],
                    stops: [
                        [0, "rgba(46,50,171,1)"],
                        [1, "rgba(0,0,0,0)"],

                    ]
                }
            },
            area: {
                fillOpacity: 0.4, // 指定所有面积图的透明度
                // pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [
            {
            name: '数量',
            color: '#406edb',
            lineColor: '#406edb',
            fillColor: {       // 设置渐变的填充颜色
                linearGradient: [0, 0, 0, 300],
                stops: [
                    [0, "rgba(46,50,171,1)"],
                    [1, "rgba(0,0,0,0)"],
                ]
            },
            data: dateOut
        }
        ]
    }, function (c) {
        chart = c;
    });
}
// -----------------------------------模块四：待办工单列表--------------------------------
var def1 = {
    timeInterval: 15000,
    direction: 'vertical',
    controlClass: "JS-swiper11",
    tableClass: "table1222"
}
var TableListt = function (tbox, options) {
    this.tbox = tbox;
    this.options = $.extend({}, def1, options);
    this.init();
};
TableListt.prototype = {
    init: function () {
        this.data = this.options.data;
        this.tbox.html("");
        this.tbox.append("<table class=\"table1222\"><thead><tr><th class=\"overTimeTh4\"></th><th class=\"overTimeTh1\">\u5E8F\u53F7</th><th class=\"overTimeTh2\">\u6240\u5C5E\u6D41\u7A0B</th><th class=\"overTimeTh3\">\u5904\u7406\u4EBA</th><th>\u65F6\u6548</th><th>\u7F16\u53F7</th></tr></thead></table>")

        this.tbox.append(this.createSwiper());
        if ($("." + this.options.controlClass).find(".swiper-slide").length <= 1) return;
        var swiper1 = new Swiper("." + this.options.controlClass, {
            direction: this.options.direction,
            autoplay: this.options.timeInterval,
            autoplayDisableOnInteraction: false,
            loop: true
        });
    },
    createSwiper: function () {
        var swiperContainer = $("<div></div>").addClass("swiper-container " + this.options.controlClass);
        var swiperWrapper = "<div class='swiper-wrapper'>";
        swiperWrapper += this.createSliders() + "</div>";
        swiperContainer.append(swiperWrapper);
        this.lastSlide = swiperContainer.find(".swiper-slide:last-child");

        return swiperContainer
    },
    createSliders: function () {
        var tempStart = "<div class='swiper-slide' ><table class='" + this.options.tableClass + "'><tbody>";
        var tempEnd = "</tbody></table></div>";
        var swiperSlides = tempStart;
        if (this.data.length == 0) {
            swiperSlides += "<tr><td colspan='6' class='tdEmptyData'>暂无数据显示</td></tr>"
        }
        for (var i = 0; i < this.data.length; i++) {
            // swiperSlides += this.tableTrs(this.data[i]);
            if (i !== 0 && i % 10 === 0) {
                swiperSlides += tempEnd + tempStart;
            }
            swiperSlides += this.tableTrs(this.data[i], i);
        }
        swiperSlides += tempEnd;
        return swiperSlides;
    },
    tableTrs: function (data, index) {

        var trs = "", scla = (data.statusN == 1 ? "" : data.statusN == 2 ? "w" : "d"),
            lcla = data.levelN == 1 ? "d" : "";

        var dotClass = ''
        if (data.online == 1) {
            dotClass = 'dooot'
        }
        if (data.online == 0) {
            dotClass = 'dooot2'
        }
        if (data.SP_MATTER != "0" && data.SP_MATTER != "普通") {
            harry = 'harry'
            harryText = "急"
        } else {
            harry = ''
            harryText = ""
        }
        var passedTime = '';
  
        passedTime = data.passedTime;
        var cl="";
        if(data.status == "超时"){
            cl = "danger";
        }else if(data.status == "预警"){
            cl = "warning"
        }

        trs += "<tr><td class=\"overTimeTd4 " + cl + "\"><span class=\"" + harry + "\"> " + harryText + "</span></td><td class=\"overTimeTd1\">" + (index + 1) + "</td><td class=\"overTimeTd2 overflowHidden\" title=\"" + data.APP_PRO_TITLE + "\">" + data.APP_PRO_TITLE + "</td><td class=\"overTimeTd3\">" + data.APP_CURRENT_USER + "</td><td class=\"overTimeTd6 overflowHidden\">" + passedTime + "</td><td class=\"numcode\">" + data.EX_APP_UID8 + "</td></tr>"
        return trs;
    }
}
// // 中间的大圆
// function midChart(data1, data2, data3) {
//     var chart_mid = Highcharts.chart('mid-chart', {
//         chart: {
//             spacing: [40, 0, 40, 0],
//             backgroundColor: 'rgba(0,0,0,0)'
//         },
//         title: {
//             text: ''
//         },
//         tooltip: {
//             pointFormat: ' <b>{point.y}条</b>'
//         },
//         plotOptions: {
//             pie: {
//                 // size:'76%',
//                 // allowPointSelect: true,
//                 // innerSize: '10%',
//                 borderColor: 'rgba(0,0,0,0)',
//                 cursor: 'pointer',

//                 dataLabels: {
//                     color: '#63aeff',
//                     connectorColor: '#63aeff',
//                     borderColor: 'rgba(0,0,0,0)',
//                     enabled: true,
//                     formatter: function () {
//                         if (this.point.y > 0)
//                             return '<b>' + this.point.y + '条</b>'; // 这里进行判断
//                     },
//                     style: {
//                         "fontSize": "14px",
//                     }
//                 },
//                 point: {
//                     events: {
//                         // mouseOver: function (e) {  // 鼠标滑过时动态更新标题
//                         //     // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
//                         //     chart.setTitle({
//                         //         text: e.target.name + '\t' + e.target.y + ' %'
//                         //     });
//                         // }
//                         //, 
//                         // click: function(e) { // 同样的可以在点击事件里处理
//                         //     chart.setTitle({
//                         //         text: e.point.name+ '\t'+ e.point.y + ' %'
//                         //     });
//                         // }
//                     }
//                 },
//             },
//             series: {
//                 enableMouseTracking: false //hover到饼上面不显示外宽
//             }
//         },
//         credits: {
//             enabled: false
//         },
//         series: [{
//             type: 'pie',
//             size: '65%',
//             innerSize: '70%',
//             name: '市场份额',
//             color: {

//             },
//             data: [
//                 {
//                     name: '正常',
//                     y: data1,
//                     color: {
//                         linearGradient: [0, 0, 0, 300],
//                         stops: [
//                             [0, 'rgba(83,26, 191,1)'],
//                             [1, 'rgba(38, 115, 252, 1)']
//                         ]
//                     }
//                 },
//                 {
//                     name: '预警',
//                     y: data2,
//                     color: {
//                         linearGradient: [0, 0, 0, 300],
//                         stops: [
//                             [0, 'rgba(249,112, 5,1)'],
//                             [1, 'rgba(249, 193, 29, 1)']
//                         ]
//                     }
//                 },
//                 {
//                     name: '超时',
//                     y: data3,
//                     color: {
//                         linearGradient: [0, 0, 0, 300],
//                         stops: [
//                             [0, 'rgba(243,79, 130,1)'],
//                             [1, 'rgba(241, 60, 96, 1)']
//                         ]
//                     }
//                 },
//             ]
//         }]
//     });
//     return chart_mid
// }

